Skip to main content

react-pro-dev-2-advanced copy

React Pro Dev - Beta Docs 1​

These special React props are supported for all built-in components:

  • children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like

    .

  • dangerouslySetInnerHTML: An object of the form { __html: '

    some html

    ' } with a raw HTML string inside. Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability. Read more about using dangerouslySetInnerHTML.

  • ref: A ref object from useRef or createRef, or a ref callback function, or a string for legacy refs. Your ref will be filled with the DOM element for this node. Read more about manipulating the DOM with refs.

  • suppressContentEditableWarning: A boolean. If true, suppresses the warning that React shows for elements that both have children and contentEditable={true} (which normally do not work together). Use this if you’re building a text input library that manages the contentEditable content manually.

  • suppressHydrationWarning: A boolean. If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. Read more about suppressing hydration errors.

  • style: An object with CSS styles, for example { fontWeight: 'bold', margin: 20 }. Similarly to the DOM style property, the CSS property names need to be written as camelCase, for example fontWeight instead of font-weight. You can pass strings or numbers as values. If you pass a number, like width: 100, React will automatically append px (“pixels”) to the value unless it’s a unitless property. We recommend using style only for dynamic styles where you don’t know the style values ahead of time. In other cases, applying plain CSS classes with className is more efficient. Read more about applying CSS with className and styles.

These special React props are supported for all built-in components:

  • children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like

    .

  • dangerouslySetInnerHTML: An object of the form { __html: '

    some html

    ' } with a raw HTML string inside. Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability. Read more about using dangerouslySetInnerHTML.

  • ref: A ref object from useRef or createRef, or a ref callback function, or a string for legacy refs. Your ref will be filled with the DOM element for this node. Read more about manipulating the DOM with refs.

  • suppressContentEditableWarning: A boolean. If true, suppresses the warning that React shows for elements that both have children and contentEditable={true} (which normally do not work together). Use this if you’re building a text input library that manages the contentEditable content manually.

  • suppressHydrationWarning: A boolean. If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. Read more about suppressing hydration errors.

  • style: An object with CSS styles, for example { fontWeight: 'bold', margin: 20 }. Similarly to the DOM style property, the CSS property names need to be written as camelCase, for example fontWeight instead of font-weight. You can pass strings or numbers as values. If you pass a number, like width: 100, React will automatically append px (“pixels”) to the value unless it’s a unitless property. We recommend using style only for dynamic styles where you don’t know the style values ahead of time. In other cases, applying plain CSS classes with className is more efficient. Read more about applying CSS with className and styles.

These standard DOM props are also supported for all built-in components:

  • accessKey: A string. Specifies a keyboard shortcut for the element. Not generally recommended.
  • aria-*: ARIA attributes let you specify the accessibility tree information for this element. See ARIA attributes for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
  • autoCapitalize: A string. Specifies whether and how the user input should be capitalized.
  • className: A string. Specifies the element’s CSS class name. Read more about applying CSS styles.
  • contentEditable: A boolean. If true, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like Lexical. React warns if you try to pass React children to an element with contentEditable={true} because React will not be able to update its content after user edits.
  • data-*: Data attributes let you attach some string data to the element, for example data-fruit="banana". In React, they are not commonly used because you would usually read data from props or state instead.
  • dir: Either 'ltr' or 'rtl'. Specifies the text direction of the element.
  • draggable: A boolean. Specifies whether the element is draggable. Part of HTML Drag and Drop API.
  • enterKeyHint: A string. Specifies which action to present for the enter key on virtual keyboards.
  • htmlFor: A string. For and , lets you associate the label with some control. Same as for HTML attribute. React uses the standard DOM property names (htmlFor) instead of HTML attribute names.
  • hidden: A boolean or a string. Specifies whether the element should be hidden.

These standard DOM props are also supported for all built-in components:

  • accessKey: A string. Specifies a keyboard shortcut for the element. Not generally recommended.
  • aria-*: ARIA attributes let you specify the accessibility tree information for this element. See ARIA attributes for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
  • autoCapitalize: A string. Specifies whether and how the user input should be capitalized.
  • className: A string. Specifies the element’s CSS class name. Read more about applying CSS styles.
  • contentEditable: A boolean. If true, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like Lexical. React warns if you try to pass React children to an element with contentEditable={true} because React will not be able to update its content after user edits.
  • data-*: Data attributes let you attach some string data to the element, for example data-fruit="banana". In React, they are not commonly used because you would usually read data from props or state instead.
  • dir: Either 'ltr' or 'rtl'. Specifies the text direction of the element.
  • draggable: A boolean. Specifies whether the element is draggable. Part of HTML Drag and Drop API.
  • enterKeyHint: A string. Specifies which action to present for the enter key on virtual keyboards.
  • htmlFor: A string. For and , lets you associate the label with some control. Same as for HTML attribute. React uses the standard DOM property names (htmlFor) instead of HTML attribute names.
  • hidden: A boolean or a string. Specifies whether the element should be hidden.
  • id: A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with useId to avoid clashes between multiple instances of the same component.
  • is: A string. If specified, the component will behave like a custom element.
  • inputMode: A string. Specifies what kind of keyboard to display (for example, text, number or telephone).
  • itemProp: A string. Specifies which property the element represents for structured data crawlers.
  • lang: A string. Specifies the language of the element.
  • onAnimationEnd: An AnimationEvent handler function. Fires when a CSS animation completes.
  • onAnimationEndCapture: A version of onAnimationEnd that fires in the capture phase.
  • onAnimationIteration: An AnimationEvent handler function. Fires when an iteration of a CSS animation ends, and another one begins.
  • onAnimationIterationCapture: A version of onAnimationIteration that fires in the capture phase.
  • onAnimationStart: An AnimationEvent handler function. Fires when a CSS animation starts.
  • onAnimationStartCapture: onAnimationStart, but fires in the capture phase.
  • onAuxClick: A MouseEvent handler function. Fires when a non-primary pointer button was clicked.
  • onAuxClickCapture: A version of onAuxClick that fires in the capture phase.
  • onBeforeInput: An InputEvent handler function. Fires before the value of an editable element is modified. React does not yet use the native beforeinput event, and instead attempts to polyfill it using other events.
  • onBeforeInputCapture: A version of onBeforeInput that fires in the capture phase.
  • onBlur: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser blur event, in React the onBlur event bubbles.
  • onBlurCapture: A version of onBlur that fires in the capture phase.
  • id: A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with useId to avoid clashes between multiple instances of the same component.
  • is: A string. If specified, the component will behave like a custom element.
  • inputMode: A string. Specifies what kind of keyboard to display (for example, text, number or telephone).
  • itemProp: A string. Specifies which property the element represents for structured data crawlers.
  • lang: A string. Specifies the language of the element.
  • onAnimationEnd: An AnimationEvent handler function. Fires when a CSS animation completes.
  • onAnimationEndCapture: A version of onAnimationEnd that fires in the capture phase.
  • onAnimationIteration: An AnimationEvent handler function. Fires when an iteration of a CSS animation ends, and another one begins.
  • onAnimationIterationCapture: A version of onAnimationIteration that fires in the capture phase.
  • onAnimationStart: An AnimationEvent handler function. Fires when a CSS animation starts.
  • onAnimationStartCapture: onAnimationStart, but fires in the capture phase.
  • onAuxClick: A MouseEvent handler function. Fires when a non-primary pointer button was clicked.
  • onAuxClickCapture: A version of onAuxClick that fires in the capture phase.
  • onBeforeInput: An InputEvent handler function. Fires before the value of an editable element is modified. React does not yet use the native beforeinput event, and instead attempts to polyfill it using other events.
  • onBeforeInputCapture: A version of onBeforeInput that fires in the capture phase.
  • onBlur: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser blur event, in React the onBlur event bubbles.
  • onBlurCapture: A version of onBlur that fires in the capture phase.
  • onClick: A MouseEvent handler function. Fires when the primary button was clicked on the pointing device.
  • onClickCapture: A version of onClick that fires in the capture phase.
  • onCompositionStart: A CompositionEvent handler function. Fires when an input method editor starts a new composition session.
  • onCompositionEnd: A CompositionEvent handler function. Fires when an input method editor completes or cancels a composition session.
  • onCompositionUpdate: A CompositionEvent handler function. Fires when an input method editor receives a new character.
  • onCompositionUpdateCapture: A version of onCompositionUpdate that fires in the capture phase.
  • onContextMenu: A MouseEvent handler function. Fires when the user tries to open a context menu.
  • onCopy: A ClipboardEvent handler function. Fires when the user tries to copy something into the clipboard.
  • onCopyCapture: A version of onCopy that fires in the capture phase.
  • onCut: A ClipboardEvent handler function. Fires when the user tries to cut something into the clipboard.
  • onCutCapture: A version of onCut that fires in the capture phase.
  • onDoubleClick: A MouseEvent handler function. Fires when the user clicks twice. Corresponds to the browser dblclick event.
  • onDoubleClickCapture: A version of onDoubleClick that fires in the capture phase.
  • onDrag: A DragEvent handler function. Fires while the user is dragging something.
  • onDragEnd: A DragEvent handler function. Fires when the user stops dragging something.
  • onDragEnter: A DragEvent handler function. Fires when the dragged content enters a valid drop target.
  • onDragEnterCapture: A version of onDragEnter that fires in the capture phase.
  • onDragOver: A DragEvent handler function. Fires on a valid drop target while the dragged content is dragged over it. You must call e.preventDefault() here to allow dropping.
  • onDragStart: A DragEvent handler function. Fires when the user starts dragging an element.
  • onDragStartCapture: A version of onDragStart that fires in the capture phase.
  • onDrop: A DragEvent handler function. Fires when something is dropped on a valid drop target.
  • onFocus: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser focus event, in React the onFocus event bubbles.
  • onClick: A MouseEvent handler function. Fires when the primary button was clicked on the pointing device.
  • onClickCapture: A version of onClick that fires in the capture phase.
  • onCompositionStart: A CompositionEvent handler function. Fires when an input method editor starts a new composition session.
  • onCompositionEnd: A CompositionEvent handler function. Fires when an input method editor completes or cancels a composition session.
  • onCompositionUpdate: A CompositionEvent handler function. Fires when an input method editor receives a new character.
  • onCompositionUpdateCapture: A version of onCompositionUpdate that fires in the capture phase.
  • onContextMenu: A MouseEvent handler function. Fires when the user tries to open a context menu.
  • onCopy: A ClipboardEvent handler function. Fires when the user tries to copy something into the clipboard.
  • onCopyCapture: A version of onCopy that fires in the capture phase.
  • onCut: A ClipboardEvent handler function. Fires when the user tries to cut something into the clipboard.
  • onCutCapture: A version of onCut that fires in the capture phase.
  • onDoubleClick: A MouseEvent handler function. Fires when the user clicks twice. Corresponds to the browser dblclick event.
  • onDoubleClickCapture: A version of onDoubleClick that fires in the capture phase.
  • onDrag: A DragEvent handler function. Fires while the user is dragging something.
  • onDragEnd: A DragEvent handler function. Fires when the user stops dragging something.
  • onDragEnter: A DragEvent handler function. Fires when the dragged content enters a valid drop target.
  • onDragEnterCapture: A version of onDragEnter that fires in the capture phase.
  • onDragOver: A DragEvent handler function. Fires on a valid drop target while the dragged content is dragged over it. You must call e.preventDefault() here to allow dropping.
  • onDragStart: A DragEvent handler function. Fires when the user starts dragging an element.
  • onDragStartCapture: A version of onDragStart that fires in the capture phase.
  • onDrop: A DragEvent handler function. Fires when something is dropped on a valid drop target.
  • onFocus: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser focus event, in React the onFocus event bubbles.
  • onKeyDown: A KeyboardEvent handler function. Fires when a key is pressed.
  • onKeyPress: A KeyboardEvent handler function. Deprecated. Use onKeyDown or onBeforeInput instead.
  • onKeyUp: A KeyboardEvent handler function. Fires when a key is released.
  • onKeyUpCapture: A version of onKeyUp that fires in the capture phase.
  • onLostPointerCapture: A PointerEvent handler function. Fires when an element stops capturing a pointer.
  • onLostPointerCaptureCapture: A version of onLostPointerCapture that fires in the capture phase.
  • onMouseDown: A MouseEvent handler function. Fires when the pointer is pressed down.
  • onMouseEnter: A MouseEvent handler function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, onMouseLeave and onMouseEnter propagate from the element being left to the one being entered.
  • onMouseLeave: A MouseEvent handler function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, onMouseLeave and onMouseEnter propagate from the element being left to the one being entered.
  • onMouseMove: A MouseEvent handler function. Fires when the pointer changes coordinates.
  • onMouseMoveCapture: A version of onMouseMove that fires in the capture phase.
  • onMouseOut: A MouseEvent handler function. Fires when the pointer moves outside an element, or if it moves into a child element.
  • onMouseOutCapture: A version of onMouseOut that fires in the capture phase.
  • onMouseUp: A MouseEvent handler function. Fires when the pointer is released.
  • onMouseUpCapture: A version of onMouseUp that fires in the capture phase.
  • onKeyDown: A KeyboardEvent handler function. Fires when a key is pressed.
  • onKeyPress: A KeyboardEvent handler function. Deprecated. Use onKeyDown or onBeforeInput instead.
  • onKeyUp: A KeyboardEvent handler function. Fires when a key is released.
  • onKeyUpCapture: A version of onKeyUp that fires in the capture phase.
  • onLostPointerCapture: A PointerEvent handler function. Fires when an element stops capturing a pointer.
  • onLostPointerCaptureCapture: A version of onLostPointerCapture that fires in the capture phase.
  • onMouseDown: A MouseEvent handler function. Fires when the pointer is pressed down.
  • onMouseEnter: A MouseEvent handler function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, onMouseLeave and onMouseEnter propagate from the element being left to the one being entered.
  • onMouseLeave: A MouseEvent handler function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, onMouseLeave and onMouseEnter propagate from the element being left to the one being entered.
  • onMouseMove: A MouseEvent handler function. Fires when the pointer changes coordinates.
  • onMouseMoveCapture: A version of onMouseMove that fires in the capture phase.
  • onMouseOut: A MouseEvent handler function. Fires when the pointer moves outside an element, or if it moves into a child element.
  • onMouseOutCapture: A version of onMouseOut that fires in the capture phase.
  • onMouseUp: A MouseEvent handler function. Fires when the pointer is released.
  • onMouseUpCapture: A version of onMouseUp that fires in the capture phase.
  • onPointerCancel: A PointerEvent handler function. Fires when the browser cancels a pointer interaction.
  • onPointerDown: A PointerEvent handler function. Fires when a pointer becomes active.
  • onPointerEnter: A PointerEvent handler function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, onPointerLeave and onPointerEnter propagate from the element being left to the one being entered.
  • onPointerLeave: A PointerEvent handler function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, onPointerLeave and onPointerEnter propagate from the element being left to the one being entered.
  • onPointerMove: A PointerEvent handler function. Fires when a pointer changes coordinates.
  • onPointerMoveCapture: A version of onPointerMove that fires in the capture phase.
  • onPointerOut: A PointerEvent handler function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and a few other reasons.
  • onPointerUp: A PointerEvent handler function. Fires when a pointer is no longer active.
  • onPointerUpCapture: A version of onPointerUp that fires in the capture phase.
  • onPointerCancel: A PointerEvent handler function. Fires when the browser cancels a pointer interaction.
  • onPointerDown: A PointerEvent handler function. Fires when a pointer becomes active.
  • onPointerEnter: A PointerEvent handler function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, onPointerLeave and onPointerEnter propagate from the element being left to the one being entered.
  • onPointerLeave: A PointerEvent handler function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, onPointerLeave and onPointerEnter propagate from the element being left to the one being entered.
  • onPointerMove: A PointerEvent handler function. Fires when a pointer changes coordinates.
  • onPointerMoveCapture: A version of onPointerMove that fires in the capture phase.
  • onPointerOut: A PointerEvent handler function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and a few other reasons.
  • onPointerUp: A PointerEvent handler function. Fires when a pointer is no longer active.
  • onPointerUpCapture: A version of onPointerUp that fires in the capture phase.
  • onPaste: A ClipboardEvent handler function. Fires when the user tries to paste something from the clipboard.
  • onPasteCapture: A version of onPaste that fires in the capture phase.
  • onScroll: An Event handler function. Fires when an element has been scrolled. This event does not bubble.
  • onScrollCapture: A version of onScroll that fires in the capture phase.
  • onSelect: An Event handler function. Fires after the selection inside an editable element like an input changes. React extends the onSelect event to work for contentEditable={true} elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
  • onSelectCapture: A version of onSelect that fires in the capture phase.
  • onTouchCancel: A TouchEvent handler function. Fires when the browser cancels a touch interaction.
  • onTouchCancelCapture: A version of onTouchCancel that fires in the capture phase.
  • onTouchEnd: A TouchEvent handler function. Fires when one or more touch points are removed.
  • onTouchEndCapture: A version of onTouchEnd that fires in the capture phase.
  • onTouchMove: A TouchEvent handler function. Fires one or more touch points are moved.
  • onTouchMoveCapture: A version of onTouchMove that fires in the capture phase.
  • onTouchStart: A TouchEvent handler function. Fires when one or more touch points are placed.
  • onTouchStartCapture: A version of onTouchStart that fires in the capture phase.
  • onTransitionEnd: A TransitionEvent handler function. Fires when a CSS transition completes.
  • onTransitionEndCapture: A version of onTransitionEnd that fires in the capture phase.
  • onWheel: A WheelEvent handler function. Fires when the user rotates a wheel button.
  • onWheelCapture: A version of onWheel that fires in the capture phase.
  • onPaste: A ClipboardEvent handler function. Fires when the user tries to paste something from the clipboard.
  • onPasteCapture: A version of onPaste that fires in the capture phase.
  • onScroll: An Event handler function. Fires when an element has been scrolled. This event does not bubble.
  • onScrollCapture: A version of onScroll that fires in the capture phase.
  • onSelect: An Event handler function. Fires after the selection inside an editable element like an input changes. React extends the onSelect event to work for contentEditable={true} elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
  • onSelectCapture: A version of onSelect that fires in the capture phase.
  • onTouchCancel: A TouchEvent handler function. Fires when the browser cancels a touch interaction.
  • onTouchCancelCapture: A version of onTouchCancel that fires in the capture phase.
  • onTouchEnd: A TouchEvent handler function. Fires when one or more touch points are removed.
  • onTouchEndCapture: A version of onTouchEnd that fires in the capture phase.
  • onTouchMove: A TouchEvent handler function. Fires one or more touch points are moved.
  • onTouchMoveCapture: A version of onTouchMove that fires in the capture phase.
  • onTouchStart: A TouchEvent handler function. Fires when one or more touch points are placed.
  • onTouchStartCapture: A version of onTouchStart that fires in the capture phase.
  • onTransitionEnd: A TransitionEvent handler function. Fires when a CSS transition completes.
  • onTransitionEndCapture: A version of onTransitionEnd that fires in the capture phase.
  • onWheel: A WheelEvent handler function. Fires when the user rotates a wheel button.
  • onWheelCapture: A version of onWheel that fires in the capture phase.
  • role: A string. Specifies the element role explicitly for assistive technologies. nt.
  • slot: A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example <Layout left={<Sidebar />} right={<Content />} />.
  • spellCheck: A boolean or null. If explicitly set to true or false, enables or disables spellchecking.
  • tabIndex: A number. Overrides the default Tab button behavior. Avoid using values other than -1 and 0.
  • title: A string. Specifies the tooltip text for the element.
  • translate: Either 'yes' or 'no'. Passing 'no' excludes the element content from being translated.
  • role: A string. Specifies the element role explicitly for assistive technologies. nt.
  • slot: A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example <Layout left={<Sidebar />} right={<Content />} />.
  • spellCheck: A boolean or null. If explicitly set to true or false, enables or disables spellchecking.
  • tabIndex: A number. Overrides the default Tab button behavior. Avoid using values other than -1 and 0.
  • title: A string. Specifies the tooltip text for the element.
  • translate: Either 'yes' or 'no'. Passing 'no' excludes the element content from being translated.

These events fire only for the form elements:

  • onReset: An Event handler function. Fires when a form gets reset.
  • onResetCapture: A version of onReset that fires in the capture phase.
  • onSubmit: An Event handler function. Fires when a form gets submitted.
  • onSubmitCapture: A version of onSubmit that fires in the capture phase.

These events fire only for the

elements. Unlike browser events, they bubble in React:

  • onCancel: An Event handler function. Fires when the user tries to dismiss the dialog.
  • onCancelCapture: A version of onCancel that fires in the capture phase. capture-phase-events)
  • onClose: An Event handler function. Fires when a dialog has been closed.
  • onCloseCapture: A version of onClose that fires in the capture phase.

These events fire only for the

elements:

  • onReset: An Event handler function. Fires when a form gets reset.
  • onResetCapture: A version of onReset that fires in the capture phase.
  • onSubmit: An Event handler function. Fires when a form gets submitted.
  • onSubmitCapture: A version of onSubmit that fires in the capture phase.

These events fire only for the

elements. Unlike browser events, they bubble in React:

  • onCancel: An Event handler function. Fires when the user tries to dismiss the dialog.
  • onCancelCapture: A version of onCancel that fires in the capture phase. capture-phase-events)
  • onClose: An Event handler function. Fires when a dialog has been closed.
  • onCloseCapture: A version of onClose that fires in the capture phase.

These events fire only for the

Details
elements. Unlike browser events, they bubble in React:

  • onToggle: An Event handler function. Fires when the user toggles the details.
  • onToggleCapture: A version of onToggle that fires in the capture phase. capture-phase-events)

These events fire for , , , , , and SVG elements. Unlike browser events, they bubble in React:

  • onLoad: An Event handler function. Fires when the resource has loaded.
  • onLoadCapture: A version of onLoad that fires in the capture phase.
  • onError: An Event handler function. Fires when the resource could not be loaded.
  • onErrorCapture: A version of onError that fires in the capture phase.

These events fire for resources like and . Unlike browser events, they bubble in React:

THIS IS ONLY A SAMPLE THERE ARE TOO MANY

  • onAbort: An Event handler function. Fires when the resource has not fully loaded, but not due to an error.
  • onCanPlay: An Event handler function. Fires when there’s enough data to start playing, but not enough to play to the end without buffering.
  • onEncrypted: An Event handler function. Fires when the browser encounters encrypted media.
  • onEnded: An Event handler function. Fires when the playback stops because there’s nothing left to play.
  • onLoadStart: An Event handler function. Fires when the browser started loading the resource.
  • onPlaying: An Event handler function. Fires when the media starts or restarts playing.
  • onProgress: An Event handler function. Fires periodically while the resource is loading.
  • onSeeking: An Event handler function. Fires when a seek operation starts.
  • onVolumeChange: An Event handler function. Fires when the volume has changed.

These events fire for resources like and . Unlike browser events, they bubble in React:

THIS IS ONLY A SAMPLE THERE ARE TOO MANY

  • onAbort: An Event handler function. Fires when the resource has not fully loaded, but not due to an error.
  • onCanPlay: An Event handler function. Fires when there’s enough data to start playing, but not enough to play to the end without buffering.
  • onEncrypted: An Event handler function. Fires when the browser encounters encrypted media.
  • onEnded: An Event handler function. Fires when the playback stops because there’s nothing left to play.
  • onLoadStart: An Event handler function. Fires when the browser started loading the resource.
  • onPlaying: An Event handler function. Fires when the media starts or restarts playing.
  • onProgress: An Event handler function. Fires periodically while the resource is loading.
  • onSeeking: An Event handler function. Fires when a seek operation starts.
  • onVolumeChange: An Event handler function. Fires when the volume has changed.

React event objects implement some of the standard Event properties:

<button onClick={e => {
  console.log(e); // React event object
}} />
  • bubbles: A boolean. Returns whether the event bubbles through the DOM.
  • cancelable: A boolean. Returns whether the event can be canceled.
  • currentTarget: A DOM node. Returns the node to which the current handler is attached in the React tree.
  • defaultPrevented: A boolean. Returns whether preventDefault was called.
  • eventPhase: A number. Returns which phase the event is currently in.
  • isTrusted: A boolean. Returns whether the event was initiated by user.
  • target: A DOM node. Returns the node on which the event has occurred (which could be a distant child).
  • timeStamp: A number. Returns the time when the event occurred.

React event objects implement some of the standard Event properties:

<button onClick={e => {
  console.log(e); // React event object
}} />
  • bubbles: A boolean. Returns whether the event bubbles through the DOM.
  • cancelable: A boolean. Returns whether the event can be canceled.
  • currentTarget: A DOM node. Returns the node to which the current handler is attached in the React tree.
  • defaultPrevented: A boolean. Returns whether preventDefault was called.
  • eventPhase: A number. Returns which phase the event is currently in.
  • isTrusted: A boolean. Returns whether the event was initiated by user.
  • target: A DOM node. Returns the node on which the event has occurred (which could be a distant child).
  • timeStamp: A number. Returns the time when the event occurred.

React event objects implement some of the standard Event methods:

preventDefault(): Prevents the default browser action for the event. stopPropagation(): Stops the event propagation through the React tree.

Additionally, React event objects provide these methods:

  • isDefaultPrevented(): Returns a boolean value indicating whether preventDefault was called.
  • isPropagationStopped(): Returns a boolean value indicating whether stopPropagation was called.
  • persist(): Not used with React DOM. With React Native, call this to read event’s properties after the event.
  • isPersistent(): Not used with React DOM. With React Native, returns whether persist has been called.

React event objects implement some of the standard Event methods:

preventDefault(): Prevents the default browser action for the event. stopPropagation(): Stops the event propagation through the React tree.

Additionally, React event objects provide these methods:

  • isDefaultPrevented(): Returns a boolean value indicating whether preventDefault was called.
  • isPropagationStopped(): Returns a boolean value indicating whether stopPropagation was called.
  • persist(): Not used with React DOM. With React Native, call this to read event’s properties after the event.
  • isPersistent(): Not used with React DOM. With React Native, returns whether persist has been called.

An event handler type for the Clipboard API events.

<input
  onCopy={e => console.log('onCopy')}
  onCut={e => console.log('onCut')}
  onPaste={e => console.log('onPaste')}
/>

Other special event objects

  • AnimationEvent handler function
  • ClipboardEvent handler function
  • CompositionEvent handler function
  • DragEvent handler function
  • FocusEvent handler function
  • Event handler function
  • InputEvent handler function
  • KeyboardEvent handler function
  • MouseEvent handler function
  • PointerEvent handler function
  • TouchEvent handler function
  • TransitionEvent handler function
  • UIEvent handler function
  • WheelEvent handler function

Other special event objects

  • AnimationEvent handler function
  • ClipboardEvent handler function
  • CompositionEvent handler function
  • DragEvent handler function
  • FocusEvent handler function
  • Event handler function
  • InputEvent handler function
  • KeyboardEvent handler function
  • MouseEvent handler function
  • PointerEvent handler function
  • TouchEvent handler function
  • TransitionEvent handler function
  • UIEvent handler function
  • WheelEvent handler function

If your app is fully built with React, create a single root for your entire app.

index.html

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- This is the DOM node -->
    <div id="root"></div>
  </body>
</html>

index.js

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

If your app is fully built with React, create a single root for your entire app.

index.html

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- This is the DOM node -->
    <div id="root"></div>
  </body>
</html>

index.js

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Troubleshooting I’ve created a root, but nothing is displayed Make sure you haven’t forgotten to actually render your app into the root:

import { createRoot } from 'react-dom/client';
import App from './App.js';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Troubleshooting I’ve created a root, but nothing is displayed Make sure you haven’t forgotten to actually render your app into the root:

import { createRoot } from 'react-dom/client';
import App from './App.js';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

I’m getting an error: “Target container is not a DOM element”

This error means that whatever you’re passing to createRoot is not a DOM node.

If you’re not sure what’s happening, try logging it:

const domNode = document.getElementById('root');
console.log(domNode); // ???
const root = createRoot(domNode);
root.render(<App />);

I’m getting an error: “Target container is not a DOM element”

This error means that whatever you’re passing to createRoot is not a DOM node.

If you’re not sure what’s happening, try logging it:

const domNode = document.getElementById('root');
console.log(domNode); // ???
const root = createRoot(domNode);
root.render(<App />);

I’m getting an error: “Functions are not valid as a React child.” This error means that whatever you’re passing to root.render is not a React component.

This may happen if you call root.render with Component instead of

:

// 🚩 Wrong: App is a function, not a Component.
root.render(App);

// ✅ Correct: <App /> is a component.
root.render(<App />);

Built-in React Components React exposes a few built-in components that you can use in your JSX.

Built-in components

, alternatively written as ..., lets you group multiple JSX nodes together.
lets you measure rendering performance of a React tree programmatically.
lets you display a fallback while the child components are loading.
enables extra development-only checks that help you find bugs early.

Built-in React Components React exposes a few built-in components that you can use in your JSX.

Built-in components

, alternatively written as ..., lets you group multiple JSX nodes together.
lets you measure rendering performance of a React tree programmatically.
lets you display a fallback while the child components are loading.
enables extra development-only checks that help you find bugs early.

Forwarding props with the JSX spread syntax

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

This forwards all of Profile’s props to the Avatar without listing each of their names.

Forwarding props with the JSX spread syntax

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

This forwards all of Profile’s props to the Avatar without listing each of their names.

When you nest content inside a JSX tag, the parent component will receive that content in a prop called children.

  • To pass props, add them to the JSX, just like you would with HTML attributes.
  • To read props, use the function Avatar({ person, size }) destructuring syntax.
  • You can specify a default value like size = 100, which is used for missing and undefined props.
  • You can forward all props with <Avatar {...props} /> JSX spread syntax, but don’t overuse it!
  • Nested JSX like
    will appear as Card component’s children prop.
  • Props are read-only snapshots in time: every render receives a new version of props.
  • You can’t change props. When you need interactivity, you’ll need to set state.

When you nest content inside a JSX tag, the parent component will receive that content in a prop called children.

  • To pass props, add them to the JSX, just like you would with HTML attributes.
  • To read props, use the function Avatar({ person, size }) destructuring syntax.
  • You can specify a default value like size = 100, which is used for missing and undefined props.
  • You can forward all props with <Avatar {...props} /> JSX spread syntax, but don’t overuse it!
  • Nested JSX like
    will appear as Card component’s children prop.
  • Props are read-only snapshots in time: every render receives a new version of props.
  • You can’t change props. When you need interactivity, you’ll need to set state.

Conditional Rendering​

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

or...

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

Conditional Rendering​

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

or...

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

Instead of this:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

You can write this:

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

Instead of this:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

You can write this:

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref:

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref:

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}